<template>
    <div class="confirm">
        <div class="content">
            <div class="title">
                <img src="@/assets/images/cor_1.png" alt="">
                <span>信息确认</span>
            </div>
            <div class="enjoy">
                <img src="@/assets/images/cor_2.png" alt="">
            </div>
            <div class="tips">请确认手机号码，当前手机号码将会接受短信信息和浙政钉工作通知。</div>
            <div class="form-con">
                <el-form 
                :model="ruleForm" 
                :rules="rules" 
                ref="ruleForm" 
                label-width="180px" 
                class="demo-ruleForm">
                <el-form-item label="用户账号：" prop="number">
                    <el-input v-model="ruleForm.number" class="borderNone" disabled></el-input>
                </el-form-item>
                <el-form-item label="用户姓名：" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="办公电话：" prop="office_number">
                    <el-input v-model="ruleForm.office_number"></el-input>
                </el-form-item>
                <el-form-item label="手机号码：" prop="cell_number">
                    <el-input v-model="ruleForm.cell_number"></el-input>
                </el-form-item>
                <el-form-item label="虚拟网号：" prop="network_number">
                    <el-input v-model="ruleForm.network_number"></el-input>
                </el-form-item>
                <el-form-item label="单位主要领导手机号码：" prop="leader1_number">
                    <el-input v-model="ruleForm.leader1_number"></el-input>
                </el-form-item>
                <el-form-item label="单位分管领导手机号码：" prop="leader2_number">
                    <el-input v-model="ruleForm.leader2_number"></el-input>
                </el-form-item>
                <el-form-item class="btn">
                    <el-button type="primary" @click="submitForm('dynamicValidateForm')">确 认</el-button>
                    <el-button type="primary" @click="resetForm('dynamicValidateForm')">重 置</el-button>
                </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="bottom">
            <img src="@/assets/images/huizhang.png" alt />
            <p>主办 : 江山市发改局重点建设项目管理中心</p>
            <p>技术支持 : 杭州畅利科技有限公司</p>
        </div>
    </div>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
   //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
  //这里存放数据
    return {
        ruleForm: {
            number:'admin',
            name: '',
            office_number: '',
            cell_number: '',
            network_number: '',
            leader1_number: '',
            leader2_number: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入用户姓名', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          cell_number: [
            { required: true, message: '请输入手机号码', trigger: 'blur' }
          ],
          leader1_number: [
            { type: 'date', required: true, message: '单位主要领导手机号码', trigger: 'blur' }
          ],
          leader2_number: [
            { type: 'date', required: true, message: '单位分管领导手机号码', trigger: 'blur' }
          ]
        }
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    submitForm(){
        this.$router.push({
          name:"home",
          path:"/home"
        })
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  created() {}, //生命周期 - 创建完成（可以访问当前this实例）
  beforeMount() {}, //生命周期 - 挂载之前
  mounted() {}, //生命周期 - 挂载完成（可以访问DOM元素）
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style scoped lang="less">
.confirm{
    height: 100vh;
    position: relative;
    padding-top: 60px;
    box-sizing: border-box;
    background: url("@/assets/images/cor_bg.jpg") no-repeat center;
    background-size: 100%;
    .content{
        width: 50%;
        margin: 0 auto;
        text-align: center;
        .title{
            img{
                vertical-align: middle;
                margin-right: 10px;
            }
            span{
                font-size: 18px;
                color: #0b0e2d;
                font-size: 89px;
                font-weight: bold;
            }
        }
        .enjoy{
            margin: 20px;
        }
        .tips{
            font-size: 18px;
            color:#11112d;
            font-weight: 600;
            margin-bottom: 30px;
        }
        .form-con{
            width: 50%;
            margin: 0 auto;
            text-align: center;
            .borderNone /deep/ .el-input__inner {
                border: none;
                background-color: #fbfbfd;
                font-size: inherit;
                color: #606266;;
            }
            // /deep/ .el-form-item__content{
            //     margin-left: 0 !important;
            // }
        }
    }
    .bottom {
    width: 100%;
    height: 50px;
    text-align: center;
    display: flex;
    color: #11112d;
    font-size: 12px;
    position: absolute;
    bottom: 0;
    line-height: 50px;
    img {
      width: 22px;
      height: 22px;
      margin-left: 38%;
      margin-right: 10px;
      margin-top: 14px;
      vertical-align: middle;
    }
    p{
      margin-right: 15px;
    }
  }
}
</style>